import Link from 'umi/link'
import Moment from 'react-moment'
import { TableProps } from 'antd/lib/table'
import { capitalize } from 'lodash'
import { User } from '../type'
import {
  Divider,
  Dropdown,
  Icon,
  Menu,
  Popconfirm,
  Table as TableT,
} from 'antd'

interface Props extends TableProps<User> {
  data: User[]
  link: (id: string) => string
  onEdit: (id: string) => void
  onDelete: (id: string) => void
}

class Table extends TableT<User> {}

class Column extends Table.Column<User> {}

export default ({ data, link, onEdit, onDelete, ...props }: Props) => (
  <Table {...props} rowKey="id" dataSource={data}>
    <Column
      title="Username"
      dataIndex="username"
      render={(username, { id }) => <Link to={link(id)}>{username}</Link>}
    />
    <Column title="Nickname" dataIndex="name" />
    <Column title="Role" dataIndex="role" render={capitalize} />
    <Column
      title="Update Time"
      dataIndex="updatedAt"
      render={time => <Moment calendar>{time}</Moment>}
    />
    <Column
      title="Action"
      render={(_, { id }) => (
        <div>
          <a onClick={() => onEdit(id)}>Edit</a>
          <Divider type="vertical" />
          <Dropdown
            trigger={['click']}
            overlay={
              <Menu>
                <Menu.Item>
                  <Popconfirm
                    title="Are you sure?"
                    onConfirm={() => onDelete(id)}
                  >
                    Delete
                  </Popconfirm>
                </Menu.Item>
              </Menu>
            }
          >
            <a className="ant-dropdown-link">
              More <Icon type="down" />
            </a>
          </Dropdown>
        </div>
      )}
    />
  </Table>
)
